<template>
  <div class="music-manage">
    <CustomTable ref="tableRef" type="index" height="965rem" v-model:form="searchForm" :tableHeader="tableHeader" api="/znjszd3/ht/music/getMusicList" lastColMinWidth="20%" :showPagination="false">
      <template v-slot:tableTop="{ rows }">
        <el-button type="primary" class="add" plain @click="add">
          <el-icon><Plus /></el-icon>
          新增</el-button
        >
      </template>
      <template #yydx="{ row }"> {{ row.yydx }}<span v-if="row.yydx">MB</span> </template>
      <template #bflx="{ row }"> {{ row.bflx == 'speech' ? '语音' : '音乐' }}</template>
      <template v-slot:lastColumn="{ row }">
        <div class="btn">
          <el-button type="primary" plain @click.stop="edit(row)">
            <el-icon><EditPen /></el-icon>
            修改</el-button
          >
          <el-button type="danger" plain @click.stop="del(row)">
            <el-icon><Delete /></el-icon>
            删除</el-button
          >
          <el-button v-if="row.bflx == 'music'" type="primary" plain @click.stop="play(row)">
            <el-icon><EditPen /></el-icon>
            播放</el-button
          >
        </div>
      </template>
    </CustomTable>
    <CustomDialog :title="openType == 'add' ? '新增' : '修改' + '语音 / 音乐'" v-model:dialogVisible="dialogVisible" width="30%" height="430rem" @confirm="confirm" @handleClose="handleClose">
      <!-- <CustomForm v-model:form="form" :editable="true" columns="1"></CustomForm> -->
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="80" class="add-form" status-icon>
        <el-form-item label="名称" prop="mc">
          <el-input v-model="form.mc" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="播放类型" prop="bfle">
          <el-radio-group v-model="form.bflx">
            <el-radio value="speech">语音</el-radio>
            <el-radio value="music">音乐</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="form.bflx == 'music'" label="文件" prop="fileName" class="upload-file">
          <input type="file" ref="fileUploadRef" multiple style="display: none" @input="onFileChange($event)" />
          <el-input v-model="form.fileName" placeholder="请选择文件" />
          <el-button type="primary" class="add" plain @click="fileUploadRef.click()"
            ><el-icon><UploadFilled /></el-icon>选择文件</el-button
          >
        </el-form-item>
        <el-form-item v-if="form.bflx == 'speech'" label="语音内容" prop="yynr">
          <el-input v-model="form.yynr" type="textarea" :rows="5" resize="none" />
        </el-form-item>
      </el-form>
    </CustomDialog>
    <CustomDialog title="播放语音 / 音乐" confirmText="关闭" v-model:dialogVisible="playDialogVisible" width="30%" height="240rem" @confirm="playDialogVisible = false">
      <audio :src="audioSrc" controls></audio>
    </CustomDialog>
  </div>
</template>

<script setup name="musicManage">
import { ref, onBeforeMount, onMounted, computed, watch, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { http, fillData, uploadFile } from '@/utils/index'
import { stores } from '@/stores/index.js'
const userStore = stores.useUserStore()
const props = defineProps({})
const tableRef = ref()
const ruleFormRef = ref()
const fileUploadRef = ref()
const dialogVisible = ref(false)
const playDialogVisible = ref(false)
const musicFile = ref(null)
const rowData = ref({})
const openType = ref('add')
const audioSrc = ref('')
const searchForm = ref({
  mc: '',
  bflx: ''
})

const form = ref({
  mc: '',
  bflx: 'speech',
  musicFile: '',
  fileName: '',
  yynr: ''
})
const tableHeader = ref([
  {
    key: 'mc',
    label: '名称',
    width: '15%'
  },
  {
    key: 'bflx',
    label: '类型',
    width: '10%'
  },
  {
    key: 'yydx',
    label: '资源大小',
    width: '10%'
  },
  {
    key: 'yynr',
    label: '语音内容',
    width: '25%'
  },
  {
    key: 'bgsj',
    label: '变更时间',
    width: '15%'
  },
  {
    key: 'bgr',
    label: '变更人',
    width: '10%'
  }
])
const rules = ref({
  mc: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  fileName: [{ required: true, message: '请选择文件', trigger: 'blur' }],
  yynr: [{ required: true, message: '请输入语音内容', trigger: 'blur' }]
})
watch(
  () => form.bflx,
  () => {
    form.value.musicFile = ''
    form.value.yynr = ''
    form.value.fileName = ''
  }
)
const confirm = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      const formData = new FormData()
      formData.append('mc', form.value.mc)
      formData.append('bflx', form.value.bflx)
      formData.append('musicFile', form.value.musicFile)
      formData.append('yynr', form.value.yynr)
      if (openType.value == 'add') {
        uploadFile('/znjszd3/ht/music/addMusic', formData).then((res) => {
          if (res.status == 200) {
            ElMessage.success(res.message[0])
            tableRef.value.getData()
            dialogVisible.value = false
          }
        })
      } else {
        formData.append('id', rowData.value.id)
        uploadFile('/znjszd3/ht/music/updateMusic', formData).then((res) => {
          if (res.status == 200) {
            ElMessage.success(res.message[0])
            tableRef.value.getData()
            dialogVisible.value = false
          }
        })
      }
    }
  })
}
const play = (row) => {
  playDialogVisible.value = true
  audioSrc.value = row.musicurl
}
const add = () => {
  openType.value = 'add'
  dialogVisible.value = true
}
const edit = (row) => {
  rowData.value = row
  console.log(rowData.value)
  openType.value = 'edit'
  fillData(form.value, row)
  dialogVisible.value = true
  console.log(form.value)
}
const del = (row) => {
  ElMessageBox.confirm('确定要删除该条数据吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      http(
        '/znjszd3/ht/music/delMusic',
        'post',
        {
          id: row.id
        },
        false
      ).then((res) => {
        if (res.status == 200) {
          ElMessage.success(res.message[0])
          tableRef.value.getData()
        }
      })
    })
    .catch(() => {})
}
//选择上传文件后的回调函数
const onFileChange = (event) => {
  const file = event.target.files[0]
  if (!file.name.toLowerCase().includes('.mp3')) {
    event.target.value = ''
    return ElMessage.error('请选择mp3文件')
  }
  form.value.musicFile = file
  form.value.fileName = file.name
  event.target.value = ''
}
const handleClose = () => {
  form.value.mc = ''
  form.value.musicFile = ''
  form.value.fileName = ''
  form.value.yynr = ''
}
</script>
<style lang="scss" scoped>
::v-deep(.add-form) {
  padding: 10px;
  border: var(--el-border);
  .el-input {
    width: 70% !important;
  }
  .upload-file {
    .el-form-item__content {
      flex-wrap: nowrap !important;
      .el-button {
        margin-left: 20px;
      }
    }
  }
  .el-textarea__inner {
    font-size: 15px;
    line-height: 25px;
  }
  .el-form-item__error {
    position: absolute;
    z-index: 1;
    top: -12%;
    // left: 50%;
    transform: translateX(250%);
    background-color: #fff;
  }
  .el-form-item__content > div:not(.el-form-item__error) {
    // min-width: 100%;
    // max-width: v-bind(lastWidth);
    // max-width: 100px !important;
  }
}
::v-deep(.custom-dialog) {
  audio {
    margin-top: 10px;
    width: 100%;
  }
}
.btn {
  width: 80%;
  margin: auto;
  text-align: left;
}
</style>
